<!--
 * @Description: 资源信息 - 主页面
 * @Author: DHL
 * @Date: 2022-02-14 21:37:31
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-09 15:20:03
-->
<template>
  <div class="tw-resource-wrapper">
    <splitpanes class="default-theme">
      <pane :size="70">
        <tw-layout
          :searchOpen="true"
          @refresh="handleRefresh"
          @search="handleSearch"
          @reset="handleReset"
        >
          <!-- 按钮组 -->
          <template #btns>
            <el-button
              class="item"
              type="primary"
              @click="handleOpenForm('add')"
              v-auth="'RESOURCE-ADD'"
            >
              <svg-icon iconClass="plus"></svg-icon>
              新增
            </el-button>
          </template>

          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="项目">
                    <el-select v-model="searchForm.projectId" filterable placeholder="请选择项目">
                      <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="`${item.name}`"
                        :value="`${item.id}`"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="资源名称">
                    <el-input
                      v-model="searchForm.name"
                      clearable
                      placeholder="请输入资源名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="资源路径">
                    <el-input
                      v-model="searchForm.url"
                      clearable
                      placeholder="请输入资源路径"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="资源类型">
                    <el-select v-model="searchForm.resType" clearable placeholder="请选择资源类型">
                      <tw-dic dicKey="RESOURCE_TYPE"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="资源状态">
                    <el-select v-model="searchForm.status" clearable placeholder="请选择资源状态">
                      <tw-dic dicKey="TWRS"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="">
                    <el-checkbox v-model="resourceTreeOpen" label="展开" />
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="8">
                  <el-form-item label="是否记录日志">
                    <el-select
                      v-model="searchForm.islog"
                      clearable
                      placeholder="请选择是否记录日志"
                    >
                      <tw-dic dicKey="ISLOG"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col> -->
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
          >
            <template #resName="{ row }">
              <!-- <svg-icon :iconClass="row.iconCls"></svg-icon> -->
              {{ row.name }}
            </template>

            <!-- 排序号 -->
            <template #resSeq="{ row }">
              <vxe-input
                v-model="row.resSeq"
                type="number"
                @blur="handleUpdateById(row)"
                @prevNumber="handleUpdateById(row)"
                @nextNumber="handleUpdateById(row)"
              ></vxe-input>
            </template>

            <!-- 资源状态 -->
            <template #resStatus="{ row }">
              <vxe-switch
                v-model="row.status"
                open-label="启用"
                open-value="1"
                close-label="禁用"
                close-value="0"
                @change="handleUpdateStatusById(row)"
              ></vxe-switch>
            </template>

            <!-- 是否记录日志 -->
            <template #resIslog="{ row }">
              <vxe-switch
                v-model="row.islog"
                open-label="开启"
                open-value="1"
                close-label="关闭"
                close-value="0"
                @change="handleUpdateById(row)"
              ></vxe-switch>
            </template>

            <!-- 是否缓存 -->
            <template #resIscache="{ row }">
              <vxe-switch
                v-model="row.iscache"
                open-label="是"
                open-value="1"
                close-label="否"
                close-value="0"
                @change="handleUpdateById(row)"
              ></vxe-switch>
            </template>

            <template #action="{ row }">
              <el-button link type="warning" @click="handleOpenForm('edit', row)">编辑</el-button>
              <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>

      <pane :size="30">
        <tw-layout @refresh="handleSearchApiByResourceId">
          <!-- 按钮组 -->
          <template #btns>
            <el-button class="item" type="warning" @click="handleShowApi()">
              <svg-icon iconClass="plus"></svg-icon>
              配置接口
            </el-button>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="resourceApiRef"
            :loading="resourceApi.loading"
            :options="resourceApi.tableOptions"
            :data="resourceApi.tableData"
          >
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <resourceForm ref="formRef" @refreshTableData="handleRefresh"></resourceForm>
    <apiForm ref="apiFormRef" @refreshTableData="handleApiRefresh"></apiForm>
    <apiGroupForm ref="apiGroupFormRef" @refreshTableData="handleApiGroupRefresh"></apiGroupForm>

    <!-- 绑定接口 -->
    <tw-drawer v-model="apiDrawer.show" :title="apiDrawer.title" size="80%" @close="handleApiClose">
      <splitpanes class="default-theme">
        <pane :size="20">
          <div class="api-group-content">
            <div class="tree-key-word">
              <el-select
                v-model="api.projectId"
                filterable
                placeholder="请选择项目"
                @change="handleApiRefresh"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="`${item.name}`"
                  :value="`${item.id}`"
                />
              </el-select>

              <el-input v-model="api.treeKeyWord" clearable placeholder="请输入关键字" />
            </div>
            <div class="toolbar">
              <el-button-group>
                <!-- <el-button size="small" @click="handleShowApiGroupForm('add')">新增</el-button> -->
                <el-button size="small" @click="handleExpand(true)">展开</el-button>
                <el-button size="small" @click="handleExpand(false)">折叠</el-button>
                <el-button size="small" @click="handleSearchApiGroup">刷新</el-button>
              </el-button-group>
            </div>
            <div class="group-tree">
              <el-scrollbar height="100%">
                <el-tree
                  ref="apiGroupRef"
                  class="filter-tree"
                  :data="api.groupData"
                  :props="api.treeProps"
                  empty-text="暂无数据"
                  highlight-current
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                  node-key="id"
                  draggable
                  @node-drop="handleApiGroupDrop"
                >
                  <template #default="{ node, data }">
                    <span class="custom-tree-node">
                      <span>
                        {{ node.label }}
                        （
                        <span :class="data.bindCount > 0 ? 'red' : ''">{{ data.bindCount }}</span>
                        ）
                      </span>
                      <span>
                        <el-button link type="danger" @click.stop="handleDeleteApiGroup(data)">
                          删除
                        </el-button>

                        <el-button
                          link
                          type="warning"
                          @click.stop="handleShowApiGroupForm('edit', data)"
                        >
                          编辑
                        </el-button>
                      </span>
                    </span>
                  </template>
                </el-tree>
              </el-scrollbar>
            </div>
          </div>
        </pane>
        <pane :size="80">
          <tw-layout @refresh="handleApiRefresh">
            <!-- 按钮组 -->
            <template #btns>
              <el-button class="item" type="warning" @click="handleShowApiForm()">
                <svg-icon iconClass="plus"></svg-icon>
                批量更新接口
              </el-button>

              <el-button
                class="item"
                type="primary"
                :loading="api.saveResApiLoading"
                @click="handleSaveResourceApi()"
              >
                <svg-icon iconClass="plus"></svg-icon>
                提交接口配置
              </el-button>
            </template>

            <!-- 数据表格 -->
            <tw-table
              ref="apiTableRef"
              :loading="api.loading"
              :options="api.tableOptions"
              :events="api.tableEvents"
              :data="api.tableData"
              @search="searchApiList"
            >
              <!-- 排序号 -->
              <template #apiSeq="{ row }">
                <vxe-input
                  v-model="row.apiSeq"
                  type="number"
                  @blur="handleApiUpdateById(row)"
                  @prevNumber="handleApiUpdateById(row)"
                  @nextNumber="handleApiUpdateById(row)"
                ></vxe-input>
              </template>

              <!-- 资源状态 -->
              <template #apiStatus="{ row }">
                <vxe-switch
                  v-model="row.status"
                  open-label="启用"
                  open-value="1"
                  close-label="禁用"
                  close-value="0"
                  @change="handleApiUpdateById(row)"
                ></vxe-switch>
              </template>

              <!-- 是否记录日志 -->
              <template #apiIslog="{ row }">
                <vxe-switch
                  v-model="row.islog"
                  open-label="开启"
                  open-value="1"
                  close-label="关闭"
                  close-value="0"
                  @change="handleApiUpdateById(row)"
                ></vxe-switch>
              </template>
            </tw-table>
          </tw-layout>
        </pane>
      </splitpanes>
    </tw-drawer>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tw-resource-wrapper {
    height: 100%;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .tree-key-word {
      padding: 0px 10px 5px 0px;

      .el-select {
        width: 100%;
        margin-bottom: 3px;
      }
    }
    .toolbar {
      padding-right: 10px;
      text-align: right;
    }

    .api-group-content {
      padding: 5px 0px 0px 5px;
      height: calc(100% - 5px);

      .group-tree {
        margin-top: 5px;
        height: calc(100% - 90px);

        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          padding-right: 10px;
          .red {
            color: #f56c6c;
          }
        }
      }
    }
  }
</style>
